<template>
	<view class="wrap">
		<view>
			<!-- <view class="title">
				<text>发起活动</text>
			</view> -->
			<view class="bg">
				<view class="img_list">
					<view class="img_box">
						<view class="img" v-for="(item, i) in imgArr" :key="i">
							<image :src="item.tempUrl" mode="aspectFill"></image>
							<view class="icon" @click.stop="delImg(i)">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode="widthFix"></image>
							</view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="img addimg" @tap="upload" v-if="imgArr.length < 1">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17149633644211414.png" mode="widthFix"></image>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 1">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17149633644211414.png" mode="widthFix"></image>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="inp_box" style="margin-right: 18rpx;    border-bottom: 1rpx solid #e4e4e4;">
						<input v-model="reqData.Title" type="text" placeholder="好的标题更能吸引小伙伴" placeholder-class="platitle" maxlength="25"/>
				</view>
				<view class="group_textarea">
					<!-- <u--textarea v-model="reqData.Remark" border="bottom" placeholder="需要备注点什么(选填)"></u--textarea> -->
					<textarea style="width: 100%;height: 80%; font-weight: 400;" :value="reqData.Remark" placeholder="需要备注点什么(选填)" placeholder-class="remtext" maxlength="200" @input="inputrem" />
					<view class="count">{{ reqData.Remark.length }} / {{ maxCount }}</view>
				</view>
			<view class="group3">
				<view class="title_2">发布目的</view>
				<view class="typetitle" >
					<view class="type" :class="skitype == item.Sort?'text':''" v-for="(item,index) in golftype" :key="index" @click="pickType(item.Sort,item.Code)">{{item.Code}}</view>
				</view>
			</view>
			<block v-if="skitype == 1">
				<view class="group">
						<view class="lab">付费标准(/h)</view>
						<view class="inp_box" style="margin-right: 18rpx;">
							<input v-model="reqData.Commission" type="text" placeholder="请输入金额" />
						</view>
				</view>
			</block>
			<block v-if="skitype == 2">
				<view class="group" @click="$refs['gift'].open()">
						<view class="lab">打赏礼物</view>
						<view class="inp_box">
							<input :value="reqData.gift" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
				</view>
			</block>
			<block v-if=" skitype == 3">
				<view class="group" @click="chooseLocation">
						<view class="lab">出发地点</view>
						<view class="inp_box">
							<input :value="reqData.Start_Pot" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
				</view>
				<view class="group" @click="endLocation">
						<view class="lab">目标地点</view>
						<view class="inp_box">
							<input :value="reqData.End_Pot" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
				</view>
				<view class="group" @click="showApportion = true">
					<view class="lab">付款方式</view>
					<view class="inp_box">
						<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>
			</block>
			<block v-if="skitype == 4">
				<view class="group">
						<view class="lab">组局人数:</view>
						<view class="inp_box">
							<input type="text" v-model="reqData.PeopleNum" placeholder="请输入预期组局人数" maxlength="3"/>
						</view>
						<view class="icon_box">
							
						</view>
				</view>
				<view class="group" @click="showApportion = true">
						<view class="lab">付款方式</view>
						<view class="inp_box">
							<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
				</view>
			</block>
			<view class="group" @click="showTime = true">
					<view class="lab">滑雪时间</view>
					<view class="inp_box">
						<input :value="dateTime" type="text" disabled placeholder="请选择时间" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
			</view>
			<view class="group">
					<view class="lab">滑雪场地</view>
					<view @click="openMap" class="inp_box flx ball_space">
						<input v-model="ShopName" type="text" disabled placeholder="请选择场地" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
			</view>
			<view class="group" v-if="IsManager">
				<view class="lab">小红书ID:</view>
				<view class="inp_box">
					<input type="text" v-model="reqData.XHS_ID" placeholder="请输入小红书ID" maxlength="15"/>
				</view>
				<view class="icon_box">
					
				</view>
			</view>
			<view class="mt30 create_ball_btn">
				<!-- <button class="btn" v-if="!isPhoneNull" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">提交</button> -->
				<button class="btn" @click="sub">提交</button>
			</view>
				<!-- <view class="group" @click="showGolfType = true">
					<view class="lab">
						类型:
					</view>
					<view class="inp_box">
						<input v-model="reqData.GolfType" type="text" disabled placeholder="请选择类型">
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>
				<view class="group">
					<view class="lab">主题:</view>
					<view class="inp_box" style="margin-right: 18rpx;">
						<input v-model="reqData.Title" type="text" placeholder="请填写主题" />
					</view>
				</view>
				<view class="group">
					<view class="lab">活动场地:</view>
					<view @click="nav_to('/pages/ball/ball_site?golfType=' + reqData.GolfType)" class="inp_box flx ball_space">
						<input v-model="ShopName" type="text" disabled placeholder="请选择场地" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>
				<view class="tip f2 c2" v-if="shop.IsOpenMember == 1">提示：本场不能直接预订，可能需要会籍或人满，如果你有会籍可以先组局，再让客服预订</view>

				<view class="group" @click="showTime = true">
					<view class="lab">活动时间:</view>
					<view class="inp_box">
						<input :value="dateTime" type="text" disabled placeholder="请选择活动开始时间" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>

				<view class="group">
					<view class="lab">邀请人数:</view>
					<view class="inp_box">
						<input type="text" v-model="reqData.PeopleNum" placeholder="请输入人数" />
					</view>
					<view class="icon_box">
						
					</view>
				</view> -->

				<!-- 1、组局者免单，参与者摊分 2、AA制 3、男A女免 4、自由定价（可分别设组局者的单价，参与者的单价，支持溢价） -->
				<!-- <view class="group" @click="showApportion = true">
					<view class="lab">买单方式:</view>
					<view class="inp_box">
						<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择买单方式" />
					</view>
					<view class="icon_box">
						<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
					</view>
				</view>

				<view class="group">
					<view class="lab">是否公开:</view>
					<view class="inp_box">
						<u-radio-group v-model="reqData.IsOpen">
							<u-radio activeColor="#333333" name="0" shape="circle" labelColor="#333333" label="公开"></u-radio>
							<u-radio activeColor="#333333" name="1" shape="circle" labelColor="#333333" label="不公开"></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="group group_textarea">
					<u--textarea v-model="reqData.Remark" maxlength="200" border="bottom" count placeholder="有什么需要说明的,可以这里说明"></u--textarea>
				</view> -->
			</view>

			<!-- 时间选择 -->
			<u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showTime" mode="datetime" @cancel="showTime = false" @confirm="setTime" minMinute="0" maxMinute="30" :filter="timeFilter"></u-datetime-picker>

			<!-- 分摊方式 -->
			<u-picker :show="showApportion" immediateChange @confirm="setFeeRule" @cancel="showApportion = false" :columns="apportion"></u-picker>
			<!-- 球局类型 -->
			<u-picker :show="showGolfType" immediateChange @confirm="setGolfType" @cancel="showGolfType=false"
				:columns="golftype"></u-picker>

			<u-popup :show="reward.show" mode="bottom" @close="reward.show = false" :round="10">
				<view class="reward_content">
					<view class="title">设置悬赏</view>
					<view class="group" @click="setReward">
						<view class="lab">悬赏:</view>
						<view class="inp_box">
							<view class="">
								<input type="text" v-model="reqData.reward" disabled />
								<image class="uni_icon" src="https://golfapi.xiaojusmart.com/Data/gift/icon_hua.png" mode=""></image>
							</view>
							<view class="total_reward">
								{{ reqData.PeopleNum }} 人 共 {{ total_reward }}
								<image class="uni_icon" src="https://golfapi.xiaojusmart.com/Data/gift/icon_hua.png" mode=""></image>
							</view>
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="18" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view class="btn">
						<button @tap="confirmSubReward" class="btontt">提交</button>
					</view>
					<view class="c_btn">设置悬赏会吸引更多人报名哦</view>
				</view>
			</u-popup>
		</view>

		<!-- 礼物赠送弹窗 -->
		<uni-popup ref="gift" type="center">
			<view class="popup">
				<image class="popup-bg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710326674977862.png" mode="">
				</image>
				<view class="popup-title">
					<view class="title-text">礼物</view>
				</view>
				<image class="popup-close" @click="$refs['gift'].close()"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift_list" :key="i" @click="gift_index=i" class="list-cell"
							:class="{'list-active':i==gift_index}">
							<image class="list-icon" :src="l.Icon" mode=""></image>
							<view v-if="i!=gift_index" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>
							<view v-if="i==gift_index" @click="giveGift(l.Name,l.Price)" class="list-btn"> 确定 </view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<toast id="toast"></toast>
	</view>
</template>

<script>
import toast from '@/pages/ball/components/toast/toast.vue';

export default {
	data() {
		return {
			maxCount:200,
			gift_list: [], //礼物数组
			gift_index: -1, //当前选中礼物
			skitype:0,
			imgArr: [],
			courtname: '',
			isPhoneNull: false,
			payPrice: 0,
			user: {},
			localList: [],
			// 时间
			minDate: new Date().getTime(),
			showTime: false,
			// 分摊
			apportion: [['组局者承担', 'AA制', '男A女免', '女A男免']],
			showApportion: false,

			showGolfType: false,
			golftype: [],

			ShopName: '', // 滑雪场地

			reward: {
				show: false
			},
			reqData: {
				Commission:null, // 价格
				Images:'', // 图片
				gift:'', // 选中的礼物名字
				Start_Pot:'', // 约拼车出发地点
				Start_Lat:'', // 出发纬度
				Start_Lng:'', // 出发经度
				End_Pot:'',	 // 约拼车目的地地点
				End_Lat:'', //目的地纬度
				End_Lng:'',	//目的地经度
				hasReward: true,  // 有无奖励
				reward: 0,
				ShopID: '',
				Remark: '', // 备注
				Price: 0,
				giftPrice: '',
				ServerDate: '',
				ServerTime: '',
				IsPayRegisterFee: 0,
				RegisterFee: '',
				ItemStr: '',
				FeeRule: '组局者承担',
				PeopleNum: 2,
				IsOpen: '0', // 是否公开,0是公开,1是不公开
				Title: '',
				WomenNum: 0,
				City: '',
				AppointmentType: '多人球局',
				Longitude: '',
				Latitude: '',
				Place: '',
				PlaceType: '',
				XHS_ID:'',//小红书ID
			},
			shop: {},
			IsManager:false,
		};
	},
	components: {
		toast
	},
	async onLoad(e) {
		// console.log(e);
		this.getGiftList();
		this.user = uni.getStorageSync('user');
		// if (e.golfType == 0) {
		// 	this.reqData.GolfType = '车找人';
		// }
		// if (e.golfType == 1) {
		// 	this.reqData.GolfType = '';
		// }
		// if (e.golfType == 2) {
		// 	this.reqData.GolfType = '';
		// }
		this.ShopName = e.title;
		this.IsCompanyAdmin()
		await this.$api.post('/Common/Add_ViewPath', {
			Path: 'ball_add',
			Platform: uni.getStorageSync('platform')
		});

		if (this.user.Phone) this.isPhoneNull = true;
		else this.isPhoneNull = false;

		let _this = this;
		uni.$on('site', async (data) => {
			_this.reqData.Place = data.ShopName;
			_this.ShopName = data.ShopName;
			_this.reqData.ShopID = data.ID;
			_this.reqData.RegisterFee = data.Price;
			_this.reqData.Longitude = data.Longitude;
			_this.reqData.Latitude = data.Latitude;

			_this.shop = data;
			let res = await _this.$util.getGeocoder(data.Address);
			this.reqData.City = res.result.address_components.city;
		});

		let dic = await this.$api.post('Catalog/GetDictionary', {
			Type: 'MeetType'
		});
		let tmp_dic = [];
		if (dic.code == 0) {
			// dic.data.forEach((item) => {
			// 	tmp_dic.push(item.Code);
			// });

			this.golftype = dic.data;
			console.log('#####');
			console.log(this.golftype);
		}

		uni.$on('reward', async (data) => {
			this.reqData.reward = data;
		});
		uni.$on('custom', async (data) => {
			this.Place = data.Place;
			this.ShopName = data.Place;
			this.reqData.ShopID = 0;
			this.reqData.Place = data.Place;
			this.reqData.Longitude = data.Longitude;
			this.reqData.Latitude = data.Latitude;
		});
	},
	onUnload() {
		uni.$off('site');
		uni.$off('reward');
		uni.$off('custom');
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
	},
	methods: {
		async IsCompanyAdmin(){
			let res = await this.$api.post('Company/IsCompanyAdmin');
			if (res.data){
				this.IsManager = true;
			}
					
		},
		inputrem(e) {
			const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			if (str.length > 200) {
				this.reqData.Remark = str.slice(0, 200)
			} else {
				this.reqData.Remark = str
			}

			// this.reqData.Remark
		}, 
		//初始化时间
		// minData
		timeFilter(mode, options) {
            let d = new Date()
			if (mode === 'hour') {
				let mi = d.getMinutes()
				if(mi>30)options.splice(0,1)
				return options
			}
            if (mode === 'minute') {
				return ['00','30']
            }
            return options;
        },
		//礼物
		giveGift(name,Price){
			this.reqData.gift = name
			this.reqData.Commission = Price
			this.$refs['gift'].close()
		},
		async getGiftList() {
				let res = await this.$api.post('Friend/GetGift');
				if(res.code == 0){
					this.gift_list = res.data;
				}
				
		},
		//选择地址
		openMap(item) {
			const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Latitude = res.latitude
						_this.reqData.Longitude = res.longitude
						_this.reqData.Place = res.name || d.result.address_reference.landmark_l2.title
						_this.ShopName = res.name || d.result.address_reference.landmark_l2.title
					}
				});
		},
		chooseLocation() {
				const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Start_Lat = res.latitude
						_this.reqData.Start_Lng = res.longitude
						_this.reqData.Start_Pot = res.name || d.result.address_reference.landmark_l2.title
					}
				});
		},
		endLocation() {
				const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.End_Lat = res.latitude
						_this.reqData.End_Lng = res.longitude
						_this.reqData.End_Pot = res.name || d.result.address_reference.landmark_l2.title
					}
				});
				// nav_to('/pages/ball/ball_site?golfType=' + reqData.PlaceType)
		},
		pickType(index,type){
			this.skitype = index
			this.reqData.PlaceType = type
		},
		//文件上传
		async uploading(url, tempKey) {
			console.log('url ----------' + url);

			const r = await this.$upload(url, (pro) => {
				this.imgArr.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			});
			this.imgArr.forEach((item) => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});

			console.log('upload file ' + r);
			// this.formdata.PhotoUrl.push(r);
			this.reqData.Images = r
		},
		upload() {
			let _this = this;
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					console.log(res);
					res.tempFiles.forEach(async (item) => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};

						_this.imgArr.push(o);

						let rex = await _this.uploading(o.flieUrl, o.tempKey);
						console.log('rex-------', rex);
					});
				},
			});
		},
		selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 1,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);

									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) {},
			});
		},
		delImg(i) {
			this.imgArr.splice(i, 1);
			// this.formdata.Images.splice(i, 1);
		},
		async showToast() {
			await this.playScoreAddAudio();
		},
		getPhoneNumber(e) {
			if (!this.reqData.Title) {
				this.$pv.msg('请填写主题');
				return false;
			}
			if (!this.reqData.ShopID && !this.ShopName) {
				this.$pv.msg('请选择场地');
				return false;
			}
			if (!this.reqData.ServerDate) {
				this.$pv.msg('请选择活动时间');
				return false;
			}
			if (!this.reqData.FeeRule) {
				this.$pv.msg('请选择买单方式');
				return false;
			}

			let _this = this;

			uni.login({
				provider: 'weixin',
				success: async (res) => {
					let d = {
						encryptedData: e.detail.encryptedData,
						code: res.code,
						aesIv: e.detail.iv
					};

					let res1 = await _this.$api.post('User/GetPhoneNumber', d);

					if (JSON.stringify(res1.data) != '') {
						let dd = {
							Phone: res1.data
						};

						let res2 = await _this.$api.post('User/BindMobile', dd);

						if (JSON.stringify(res2.data) == 'true') {
							_this.isPhoneNull = true;

							_this.reward.show = true;
						} else {
							_this.$pv.msg('绑定号码失败');
						}
					}
				},
				fail: (err) => {
					uni.showModal({
						content: '获取失败',
						showCancel: false
					});
				}
			});
		},

		openMsg() {
			// #ifdef MP-WEIXIN
			return new Promise((r, j) => {
				wx.requestSubscribeMessage({
					tmplIds: ['JjAGfFcjOyiJciTpc6noLLspC7JEet2Gb1Pt3iWh55Y', 'GJbLgiFQTdYnKSuqPCNtMA-ADkxwONj756WXrUebPdM'],
					success(re) {
						r(re);
					},
					fail(re) {
						j(re);
					}
				});
			});
			// #endif
			// #ifdef APP
			return true;
			// #endif
		},

		async sub() {
			if(this.skitype == 1 || this.skitype == 2){
				
				if( this.reqData.Commission <=0){
					this.$pv.msg('金额必须大于0');
					return false;
				}
				if(!Number(this.reqData.Commission)){
					this.$pv.msg('请输入正确的数字');
					return false;
				}
			}
			
			if (!this.reqData.Title) {
				this.$pv.msg('请填写主题');
				return false;
			}
			if (!this.reqData.ShopID && !this.ShopName) {
				this.$pv.msg('请选择场地');
				return false;
			}
			// if (!this.reqData.ServerDate) {
			// 	this.$pv.msg('请选择时间');
			// 	return false;
			// }
			if (!this.imgArr.length) {
				this.$pv.msg('至少上传一张图片');
				return;
			}
			if(this.skitype == 0){
					this.$pv.msg('请选择发布的目的');
					return false;
			}
			if(this.skitype == 1){
				if(!this.reqData.Commission){
					this.$pv.msg('请输入金额');
					return false;
				}
			}
			if(this.skitype == 2){
				if(!this.reqData.gift){
					this.$pv.msg('请选择礼物');
					return false;
				}

			}
			if(this.skitype == 3){
				if (!this.reqData.Start_Pot) {
					this.$pv.msg('请选择出发地点');
					return false;
				}
				if (!this.reqData.End_Pot) {
					this.$pv.msg('请选择目标地点');
					return false;
				}
				if (!this.reqData.FeeRule) {
					this.$pv.msg('请选择买单方式');
					return false;
				}
			}
			let str = this.$util.utf16ToEntities(this.reqData.Remark)
			if (str.length > 200) {
				this.reqData.Remark = str.slice(0, 200)
			}
			if(this.skitype == 1 || this.skitype == 2){
				const res = await this.checkUser();
				let pres = await this.$api.post('/Payment/PayV2', {
					EventID: res.data.AppointmentID,
					CompanyID: 6003,
					total_fee: this.reqData.Commission,
					body: '发起球局',
					EventType: this.skitype == 1 ?'球局教练付费':'球局赠送礼物',
					SourcePage: 'ball_add',
					// #ifdef MP-WEIXIN
					PayChannel: 'weixin',
					// #endif
					// #ifdef APP
					PayChannel: 'app'
					// #endif
				});
				if (pres.data == 0) {
					//已余额支付成功
					this.$pv.msg('已为您发布预约');
					uni.setStorageSync('published', true);
					this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
					return;
				}
				let payObj = JSON.parse(pres.data);
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async (r) => {
						this.$pv.msg('已为您发布预约');
						uni.setStorageSync('published', true);
						// await this.openMsg();
						this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
					},
					fail: (err) => {
						this.$pv.msg('您已取消支付');
						return;
					}
				});
			}else{
				this.confirmSub()
			}
			// this.reward.show = true;
			return;
		},

		// 有奖励
		async confirmSubReward() {
			// await this.openMsg();

			if (this.reqData.reward == 0) {
				console.log('无奖励');
				this.confirmSub();
			} else {
				this.reqData.hasReward = true;
				const res = await this.checkUser();
				if (!res.data) {
					this.$pv.msg(res.message);
					return;
				}

				let pres = await this.$api.post('/Payment/PayV2', {
					EventID: res.data.AppointmentID,
					CompanyID: 6003,
					total_fee: this.total_reward,
					body: '发起球局',
					EventType: '球局奖励',
					SourcePage: 'ball_add',
					// #ifdef MP-WEIXIN
					PayChannel: 'weixin',
					// #endif
					// #ifdef APP
					PayChannel: 'app'
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功
					this.$pv.msg('已为您发布');

					this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);

					return;
				}

				let payObj = JSON.parse(pres.data);

				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async (r) => {
						this.$pv.msg('已为您发布');
						// uni.setStorageSync('published', true);
						// await this.openMsg();
						this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
					},
					fail: (err) => {
						this.$pv.msg('支付失败');
					}
				});
			}
		},

		// 无奖励
		async confirmSub() {
			this.reqData.hasReward = false;

			const res = await this.checkUser();
			if (res.data) {
				this.$pv.msg('已为您发布');
				uni.setStorageSync('published', true);
				this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
				return;
			} else {
				this.$pv.msg(res.message);
				this.nav_back(1000);
			}
		},

		// 发布校验
		async checkUser() {
			this.$pv.load('正在处理');

			const rr = await this.subData();

			return rr;
		},

		async subData() {
			let obj = {
				UserID: uni.getStorageSync('user').UserID,
				Price: this.reqData.Price || 0
			};
			let arr = [obj];
			let data = JSON.parse(JSON.stringify(this.reqData))
			data.ItemStr = JSON.stringify(arr);
			data.Title = this.$util.utf16ToEntities(this.reqData.Title) 
			data.Remark = this.$util.utf16ToEntities(this.reqData.Remark)
			//this.reqData.Images = JSON.stringify(this.localList.map(item => item.netPath));
			// console.log(data);
			let res = await this.$api.post('Appointment/Apply', data);
			await this.$im.createGroup({
					groupID: res.data.AppointmentID,
					groupName: "【" + this.reqData.Title + "】群聊",
					groupAvatarUrl: this.user.HeadImgUrl,
					userIDs: [],
				})
			await this.$im.sendCustomMessage({
					conversationID: uni.$prefix + res.data.AppointmentID,
					subType: 50,
					conversationType: 2,
					message: JSON.stringify({
						id: res.data.AppointmentID
					})
			})
			//创建球局群聊，发起球局者是群聊群主
			// const groupID = res.data.AppointmentID.toString();
			// const groupInfo = {
			// 	groupID: groupID,
			// 	groupName: '【' + this.reqData.Title + '】群聊',
			// 	groupAvatarUrl: this.user.HeadImgUrl
			// };
			// const userIDs = [obj.UserID + '09'];
			// const config = {
			// 	groupNotice: '',
			// 	groupAttributes: {
			// 		key1: 'value1',
			// 		key2: 'value2'
			// 	}
			// };
			// const { groupAvatarUrl, groupID: imgrouoID, groupName } = groupInfo;
			// const gropdata = {
			// 	groupID: imgrouoID,
			// 	groupName,
			// 	groupAvatarUrl,
			// 	userIDs: [],
			// 	groupNotice: config.groupNotice,
			// 	groupAttributes: config.groupAttributes
			// };
			// 加入群聊的事件
			// console.log(gropdata, '----------gropdata');
			// await this.$im.createGroup(gropdata).then((d) => {
			// 	console.log(d, '创建群聊lllllllllll');
			// });
			// await this.$im.sendCustomMessage({
			// 	conversationID: uni.$prefix + imgrouoID,
			// 	subType: 50,
			// 	conversationType: 2,
			// 	message: JSON.stringify({
			// 		id: imgrouoID
			// 	})
			// });
			// 加入群聊的事件
			// await this.$im.createGroup(groupInfo, userIDs, config).then((d) => {
			// 	const textMsg = '欢迎来到我的雪撘子聚会';
			// 	this.$im.updateGroupAvatarUrl(this.user.HeadImgUrl, groupID);
			// 	this.$im.sendChatMessage(2, textMsg, groupID, this.isByte).then((d) => {});
			// });

			return res;
		},
		setGolfType(e) {
			this.reqData.PlaceType = e.value[0];
			this.showGolfType = false;
		},
		setReward() {
			this.nav_to(`/pages/ball/ball_reward`);
		},

		setFeeRule(e) {
			this.reqData.FeeRule = e.value[0];
			this.showApportion = false;
		},
		setPeopleNum(e) {
			this.reqData.PeopleNum = e.value[0];
		},
		setTime(e) {
			// console.log('======',e);
			let em = uni.$u.timeFormat(e.value, 'hh:MM');
			let n =''
			let b = ''
			if(em.slice(3) > 30){
				let time = Number(e.value)+(3600*1000)
				n = uni.$u.timeFormat(time, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(time, 'hh:MM');
			}else{
				n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(e.value, 'hh:MM');
			}
			if(b.slice(3) != 30){
				let hm = b.split('')
				hm.splice(3,1,'0')
				hm.splice(4,1,'0')
				// console.log(hm,'b');
				b = hm.join('')
			}
			this.reqData.ServerDate = n;
			this.reqData.ServerTime = b;
			// console.log(this.reqData.ServerDate,this.reqData.ServerTime.slice(3),'this.reqData.ServerTime');
			this.showTime = false;
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			if (type === 'hour') {
				return `${value}时`;
			}
			if (type === 'minute') {
				return `${value}分  `;
			}
			return value;
		}
	},
	computed: {
		total_reward() {
			return this.reqData.PeopleNum * this.reqData.reward;
		},
		dateTime() {
			if (!this.reqData.ServerDate) {
				return '';
			} else {
				return this.reqData.ServerDate + ' ' + this.reqData.ServerTime;
			}
		},
		svgPrice() {
			let n = '';
			if (this.reqData.FeeRule === '男A女免') {
				if (this.reqData.PeopleNum <= this.reqData.WomenNum) {
					this.$pv.msg('女性人数要小于同组人数');
					this.reqData.WomenNum = this.reqData.PeopleNum > 0 ? this.reqData.PeopleNum - 1 : 0;
					this.payPrice = n;
				} else {
					n = this.reqData.RegisterFee / (this.reqData.PeopleNum - this.reqData.WomenNum);
					this.payPrice = n;
				}
			} else if (this.reqData.FeeRule === 'AA制') {
				n = this.reqData.RegisterFee / this.reqData.PeopleNum;
				this.payPrice = n;
			} else if (this.reqData.FeeRule === '组局者承担') {
				n = 0;
				this.payPrice = this.reqData.RegisterFee;
			}
			return n;
		}
	},
	watch: {
		svgPrice(newVal) {
			this.reqData.Price = newVal;
		}
	}
};
</script>

<style lang="scss">
.x-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 0 40rpx;

	.list-cell {
		width: 25%;
		height: 195rpx;
		border: 2rpx solid rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx 0rpx 10rpx;
		border-radius: 16rpx;
		position: relative;

		&.list-active {
			border-radius: 16rpx;
			border: 2rpx solid #FD4C61;
		}

		.list-btn {
			width: calc(100% + 4rpx);
			height: 52rpx;
			color: #fff;
			background: #FD4C61;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: absolute;
			bottom: -2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.list-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.list-name {
			background: linear-gradient(to right, #ff0000, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 26rpx;
			margin-top: 8rpx;
		}

		.list-price {
			background: linear-gradient(to right, #ff0000, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 22rpx;
			margin-top: 5rpx;
		}
	}
}
.popup {
	width: 650rpx;
	// height: 700rpx;
	border-radius: 20rpx;
	position: relative;

	.popup-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
	}

	.popup-title {
		display: flex;
		justify-content: center;

		.title-text {
			background-image: linear-gradient(135deg, #FFEACB, #F7B15C);
			font-size: 30rpx;
			font-weight: bold;
			color: #240E37;
			padding: 10rpx 30rpx;
			border-radius: 0 0 24rpx 24rpx;
		}
	}

	.popup-title-sub {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		color: #a7a7ae;
		font-size: 26rpx;
	}

	.popup-close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 30rpx;
		top: 10rpx;
	}

	.popup-wrap {
		max-height: 800rpx;
		min-height: 300rpx;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.popup-btn {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 50rpx;
		&.-btn{
			justify-content: center;
		}
		.x-btn {
			width: 260rpx;
			height: 70rpx;
			border-radius: 60rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn-a {
			color: #f9d9a2;
			border: 4rpx solid #f9d9a2;
		}

		.btn-b {
			color: #6C250F;
			background-image: linear-gradient(to right, #FCEBC0, #F2B162);
		}
	}
}
.wrap{
	padding-bottom: 100rpx;
}
	.group3{
		border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 32rpx;
		.title_2{
			color: #333333;
			font-size: 32rpx;
			margin-top: 32rpx;
			margin-bottom: 22rpx;
		}
		.typetitle{
			display: flex;
			.type{
				width: 148rpx;
				height: 56rpx;
				background-color: #F7F7F7;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				color: #999999;
				font-size: 28rpx;
				margin-right: 16rpx;
			}
			.text{
				color: #fff;
				background-color: #0D0D0D;
			}
		}
	}
	.img_list {
		// border-bottom: 1rpx solid #E4E4E4;
		padding-bottom: 32rpx;
		margin-bottom: 40rpx;
		.title {
			font-size: 30rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.img_box {
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			flex-wrap: wrap;
		}
		.videobox {
			padding: 32rpx;
			position: relative;
			> view {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img {
			width: 228rpx;
			height: 228rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image {
				border-radius: 8rpx;
			}
			.icon {
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n) {
			margin-right: 0;
		}
		.addimg {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F6F6F6;
			image {
				width: 228rpx;
				height: 228rpx;
			}
		}
	}
.platitle{
	font-size: 32rpx !important;
	font-weight: bold !important;
	color: #BEBEBE;
}
.remtext{
	font-size: 28rpx !important;
}
.input-placeholder{
	font-size: 28rpx;
	color: #BEBEBE !important;
}
.pb100 {
	padding-bottom: 100rpx;
}

.ball_space {
	input {
		flex: 1;
	}

	.sele {
		margin-left: 16rpx;
		background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
		text-align: center;
		color: #4c310c;
		font-weight: bold;
		padding: 2rpx 10rpx;
		border-top: 100%;

		position: relative;
	}
}

.reward_content {
	padding: 20rpx 30rpx;

	.title {
		text-align: center;
		font-weight: 600;
		margin: 20rpx 0 40rpx 0;
	}

	.btn {
		margin: 60rpx 0 30rpx 0;

		.btontt {
			border: none;
			outline: none;
			border-radius: 110rpx;
			color: #ffffff;
		}
	}

	.c_btn {
		text-align: center;
		margin: 20rpx 0;
	}

	.group {
		border-bottom: 1px solid #e4e4e4;

		.lab {
			padding-right: 10rpx;
			color: black;
			font-size: 32rpx;
		}

		.inp_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: flex-end;

			> view {
				display: flex;
			}

			.total_reward {
				font-size: 28rpx;
				color: rgb(156, 156, 156);
				margin-top: 16rpx;
			}
		}

		.uni_icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	view {
		color: black;
	}
}

.title {
	padding: 20rpx 0 10rpx;
	margin-left: 30rpx;
	font-size: 36rpx;
	line-height: 60rpx;
}

.bg {
	margin-top: 20rpx;
	// background: #202020;
	border-radius: 16rpx;
	font-weight: bold;
	padding: 0 24rpx;
}
.inp_box{
	// border-bottom: 1rpx solid #E4E4E4;
	// height: 96rpx;
    // padding-top: 24rpx;
    box-sizing: border-box;
}
.group {
	display: flex;
	align-items: center;
	height: 142rpx;
	border-bottom: 1rpx solid #E4E4E4;
	// border-bottom: 1px solid #e4e4e4;
	// margin-left: 30rpx;
	// margin-right: 30rpx;

	&:last-child {
		// border-bottom: none;
	}

	.lab {
		padding-right: 10rpx;
		color: #333333;
		font-size: 32rpx;
	}

	.inp_box {
		flex: 1;

		input {
			width: 100%;
			color: #333333;
			text-align: right;
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}
}

.group2 {
	.lab {
		color: #fef0bc;
	}

	.inp_box {
		input {
			color: #fef0bc;
		}

		.input-placeholder {
			// color: #FEF0BC;
			color: rgba(254, 240, 188, 0.6);
		}
	}
}

.group_textarea {
	height: 142rpx;
	margin-top: 30rpx;
	box-sizing: border-box;
	position: relative;
	.count {
		position: absolute;
		bottom: -5rpx;
		right: 33rpx;
		font-size: 28rpx;
		color: #C2C2C2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
	}
}

.mt30 {
	margin-top: 30rpx;
}

/deep/ .u-radio-group--row {
	justify-content: flex-end;
}

/deep/ .u-radio {
	margin-right: 20rpx;
	height: 80rpx;
}

.tip {
	margin-top: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	color: #ef4034;
}

.create_ball_btn {
	// position: absolute;
	// width: 100%;
	// display: flex;
	// justify-content: center;
	// bottom: 58rpx;

	.btn {
		width: 84%;
		margin-left: 50rpx;
		// margin: ;
	}
}
</style>
